<template>
    <div>
         <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
        >
            <el-menu-item index="0">
            <img style="width: 100px" 
            src="../images/element-plus-logo.svg"
            alt="Element logo"/>
            </el-menu-item> 
            <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
            <el-menu-item index="2"><router-link to="/cart">购物车</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to="/order">订单</router-link></el-menu-item>
            <el-menu-item index="4">关于</el-menu-item> 
            <div class="flex-grow"/>
             <el-menu-item index="5">{{name}},欢迎你</el-menu-item>
            <el-menu-item index="6" v-if="name=='游客'"><router-link to="/login">登录/注册</router-link></el-menu-item>
            <el-menu-item index="7" v-else @click="goback()">退出 </el-menu-item> 

        </el-menu>
    </div>
</template>
<script>
export default{
    data(){
        return{
            name:'游客'
        }
    },
    mounted(){
        if(sessionStorage.getItem('username')==null){
            this.name='游客'
        }else{
            this.name=sessionStorage.getItem('username')
        }
    },
    methods:{
        goback(){
            this.name='游客',
            sessionStorage.setItem('username','游客')

        }
    }
}


</script>
<style>
a:-webkit-any-link{
    text-decoration: none;
}

.flex-grow{
    flex-grow: 1;
}


</style>